@@include('./_header.html', {
"title": "组件 - QMUI Web",
"currentPage": "widget"
})
<div class="frame_sidebar" id="frame_sidebar">

    <div class="frame_sidebar_inner">

        <ul class="frame_sidebar_nav">
            <li class="frame_sidebar_nav_item js_sidebar_group">
                <a class="frame_sidebar_nav_link" href="#qui_widgetCommon">通用组件</a>
                <ul class="frame_sidebar_nav frame_sidebar_nav_Children">
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_widget_btn">按钮</a>
                    </li>
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_widget_dialog">对话框</a>
                    </li>
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_widget_mask">遮罩层</a>
                    </li>
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_widget_dropdownMenu">下拉菜单</a>
                    </li>
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_widget_tab">选项卡</a>
                    </li>
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_widget_ipt">文本输入</a>
                    </li>
                </ul>
            </li>
            <li class="frame_sidebar_nav_item js_sidebar_group">
                <a class="frame_sidebar_nav_link" href="#qui_widgetExpand">扩展组件</a>
                <ul class="frame_sidebar_nav frame_sidebar_nav_Children">
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_widget_autoSprite">CSS Sprite 自动合并</a>
                    </li>
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_widget_dualCols">等高左右双栏</a>
                    </li>
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_widget_fileUpload">文件上传按钮</a>
                    </li>
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_widget_treeMenu">树状选择菜单</a>
                    </li>
                </ul>
            </li>
        </ul>

    </div>
</div>

<div class="frame_cnt">

    <div class="dm_column">

        <h2 id="qui_widgetCommon" class="dm_column_title">通用组件</h2>

        <p class="dm_column_tip">QMUI Web 的通用组件与 Bootstrap 这类组件库框架中的组件并不相同，通用组件本身只有实现了很少的必要样式，而通过 Sass 配置表的方式预留了大量可配置的接口，在创建一个新项目后，应该先根据设计配置好这些信息，当这些信息配置完成，那么一个项目的基本样式就可以快速实现了。当然，也可以直接使用默认样式用于快速开发。</p>

        <p class="dm_column_tip"><strong>以下是 Demo 的组件展示效果，在实际项目中，你无需另外复制这些 HTML 来产生组件，当开发者使用 <a href="https://github.com/QMUI/generator-qmui" target="_blank">generator-qmui</a> 安装 QMUI Web 时，该工具会自动按默认配置生成一个组件列表。</strong></p>

        <div class="dm_column_item">

            <h3 id="qui_widget_btn" class="dm_column_item_title">按钮</h3>

            <div class="dm_column_item_info">
                <div class="dm_column_display">
                    <div class="dm_column_display_title">展示:</div>
                    <div class="dm_column_display_cnt">
                        <a class="dm_btn" href="javascript:;">按钮</a>
                        <a class="dm_btn dm_btn_Ghost" href="javascript:;">按钮</a>
                        <a class="dm_btn" href="javascript:;" disabled>按钮禁用</a>
                        <a class="dm_btn dm_btn_Ghost" href="javascript:;" disabled>按钮禁用</a>
                    </div>
                </div>
                <div class="dm_column_item_info_code">
<pre><code class="html"><a class="dm_btn" href="javascript:;">按钮</a>
<a class="dm_btn dm_btn_Ghost" href="javascript:;">按钮</a>
<a class="dm_btn" href="javascript:;" disabled>按钮禁用</a>
<a class="dm_btn dm_btn_Ghost" href="javascript:;" disabled>按钮禁用</a></code></pre>
                </div>
            </div>

        </div>

        <div class="dm_column_item">

            <h3 id="qui_widget_dialog" class="dm_column_item_title">对话框</h3>

            <div class="dm_column_item_info">
                <div class="dm_column_display">
                    <div class="dm_column_display_title">展示:</div>
                    <div class="dm_column_display_cnt" style="padding: 0 0 15px 15px;">
                        <div class="dm_dialog dm_columnDisplayControl">
                            <a class="dm_dialog_close" href="javascript:;">×</a>
                            <div class="dm_dialog_head">
                                <div class="dm_dialog_title">对话框标题</div>
                            </div>
                            <div class="dm_dialog_body">
                                这里是对话框的主体内容。<br/>
                                通常一个对话框由头部、主体内容和底部栏三部分组成。
                            </div>
                            <div class="dm_dialog_foot">
                                <a class="dm_btn" href="javascript:;">确认</a><a class="dm_btn dm_btn_Ghost"
                                                                               href="javascript:;">取消</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dm_column_item_info_code">
<pre><code class="html"><div class="dm_dialog">
  <a class="dm_dialog_close" href="javascript:;">×</a>
  <div class="dm_dialog_head">
    <div class="dm_dialog_title">对话框标题</div>
  </div>
  <div class="dm_dialog_body">
    这里是对话框的主体内容。<br/>
    通常一个对话框由头部、主体内容和底部栏三部分组成。
  </div>
  <div class="dm_dialog_foot">
    <a class="dm_btn dm_btn_Blue" href="javascript:;">是</a>
    <a class="dm_btn" href="javascript:;">否</a>
    <a class="dm_btn dm_btn_Blue dm_btn_Blue_Disabled" href="javascript:;">否</a>
  </div>
</div></code></pre>
                </div>
            </div>

        </div>

        <div class="dm_column_item">

            <h3 id="qui_widget_mask" class="dm_column_item_title">遮罩层</h3>

            <div class="dm_column_item_info">
                <div class="dm_column_display">
                    <div class="dm_column_display_title">展示:</div>
                    <div class="dm_column_display_cnt">
                        <a id="qui_showMask" href="javascript:;">查看效果</a>
                    </div>
                </div>
                <div class="dm_column_item_info_code">
<pre><code class="html"><div id="maskWrap" style="display: none;"> <!-- 包裹遮罩层和主体元素的容器，由前端控制 -->
  <div class="dm_mask"></div>
    <!-- 这里是对话框或其他需要展示的主体元素 -->
</div></code></pre>
                </div>
            </div>

        </div>

        <div class="dm_column_item">

            <h3 id="qui_widget_dropdownMenu" class="dm_column_item_title">下拉菜单</h3>

            <div class="dm_column_item_info">
                <div class="dm_column_display">
                    <div class="dm_column_display_title">展示:</div>
                    <div class="dm_column_display_cnt">
                        <div class="dm_dropdownMenu dm_columnDisplayControl">
                            <ul>
                                <li class="dm_dropdownMenu_item">
                                    <a href="javascript:;" class="dm_dropdownMenu_itemLink">菜单选项一</a>
                                </li>
                                <li class="dm_dropdownMenu_item">
                                    <a href="javascript:;" class="dm_dropdownMenu_itemLink">菜单选项二</a>
                                </li>
                                <li class="dm_dropdownMenu_item">
                                    <a href="javascript:;" class="dm_dropdownMenu_itemLink">菜单选项三</a>
                                </li>
                                <li class="dm_dropdownMenu_item">
                                    <a href="javascript:;" class="dm_dropdownMenu_itemLink">菜单选项四</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="dm_column_item_info_code">
<pre><code class="html"><div class="dm_dropdownMenu">
  <ul>
    <li class="dm_dropdownMenu_item">
      <a href="javascript:;" class="dm_dropdownMenu_itemLink">菜单选项一</a>
    </li>
    <li class="dm_dropdownMenu_item">
      <a href="javascript:;" class="dm_dropdownMenu_itemLink">菜单选项二</a>
    </li>
    <li class="dm_dropdownMenu_item">
      <a href="javascript:;" class="dm_dropdownMenu_itemLink">菜单选项三</a>
    </li>
    <li class="dm_dropdownMenu_item">
      <a href="javascript:;" class="dm_dropdownMenu_itemLink">菜单选项四</a>
    </li>
  </ul>
</div></code></pre>
                </div>
            </div>

        </div>

        <div class="dm_column_item">

            <h3 id="qui_widget_tab" class="dm_column_item_title">选项卡</h3>

            <div class="dm_column_item_info">
                <div class="dm_column_display">
                    <div class="dm_column_display_title">展示:</div>
                    <div class="dm_column_display_cnt">
                        <div class="dm_tab">
                            <div class="dm_tab_title">
                                <ul class="dm_tabNav">
                                    <li class="dm_tabNav_item dm_tabNav_item_Curr">
                                        <a href="javascript:;" class="dm_tabNav_itemLink">选项卡一</a>
                                    </li>
                                    <li class="dm_tabNav_item">
                                        <a href="javascript:;" class="dm_tabNav_itemLink">选项卡二</a>
                                    </li>
                                    <li class="dm_tabNav_item">
                                        <a href="javascript:;" class="dm_tabNav_itemLink">选项卡三</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="dm_tab_cnt">这里是选项卡的内容</div>
                        </div>

                    </div>
                </div>
                <div class="dm_column_item_info_code">
<pre><code class="html"><div class="dm_tab">
  <div class="dm_tab_title">
    <ul class="dm_tabNav">
      <li class="dm_tabNav_item dm_tabNav_item_Curr">
        <a href="javascript:;" class="dm_tabNav_itemLink">选项卡一</a>
      </li>
      <li class="dm_tabNav_item">
        <a href="javascript:;" class="dm_tabNav_itemLink">选项卡二</a>
      </li>
      <li class="dm_tabNav_item">
        <a href="javascript:;" class="dm_tabNav_itemLink">选项卡三</a>
      </li>
    </ul>
  </div>
  <div class="dm_tab_cnt">这里是选项卡的内容</div>
</div></code></pre>
                </div>
            </div>

        </div>

        <div class="dm_column_item">

            <h3 id="qui_widget_ipt" class="dm_column_item_title">文本输入</h3>

            <div class="dm_column_item_info">
                <div class="dm_column_display">
                    <div class="dm_column_display_title">展示:</div>
                    <div class="dm_column_display_cnt">
                        <input type="text" class="dm_inputText" placeholder="普通文本框"/>
                        <textarea class="dm_textarea" placeholder="长文本框"></textarea>
                    </div>
                </div>
                <div class="dm_column_item_info_code">
<pre><code class="html"><input type="text" class="dm_inputText" placeholder="普通文本框"/>
<textarea class="dm_textarea" placeholder="可惜"></textarea></code></pre>
                </div>
            </div>

        </div>

    </div><!-- common widget end -->


    <div class="dm_column">

        <h2 id="qui_widgetExpand" class="dm_column_title">扩展组件</h2>

        <p class="dm_column_tip">
            扩展组件是指那些不便于收录到通用组件中（通常是因为组件的业务性无法完全剥离，或者是组件只有在某些项目下才会被用到，通用性不大），但因为结构复杂，或者有一些技术难点的存在，仍值得参考的组件。因此这里展示的扩展组件都仅作参考作用，QMUI 主源码中并不提供这些组件。</p>

        <!-- CSS Sprite 自动合并 start -->
        <div class="dm_column_item">

            <h3 id="qui_widget_autoSprite" class="dm_column_item_title">CSS Sprite 自动合并</h3>

            <p class="dm_column_tip">QMUI 1.x 版本提供了一套基于 Compass 的自动 CSS Sprite 的扩展组件，从 2.0.0 版本开始弃用，改为更加方便使用的基于 Node.js 的<a href="./scaffold.html#qui_scaffoldSprite" target="_blank">雪碧图方案</a>。若项目中仍需要使用该扩展组件，可以参考<a href="https://github.com/Tencent/QMUI_Web/wiki/1.x-%E7%89%88%E6%9C%AC%E7%9B%B8%E5%85%B3%E9%85%8D%E7%BD%AE#%E9%9B%AA%E7%A2%A7%E5%9B%BE%E6%89%A9%E5%B1%95%E7%BB%84%E4%BB%B6" target="_blank">这里</a>。</p>

        </div>
        <!-- CSS Sprite 自动合并 end -->

        <!-- 等高左右双栏 start -->
        <div class="dm_column_item">
            <h3 id="qui_widget_dualCols" class="dm_column_item_title">等高左右双栏</h3>

            <div class="dm_column_item_info">
                <div class="dm_column_display">
                    <div class="dm_column_display_title">展示（实现方式1）:</div>
                    <div class="dm_column_display_cnt">
                        <div class="dm_dualCols1">
                            <div class="dm_dualCols_left">左栏</div>
                            <div class="dm_dualCols_right">右栏</div>
                        </div>
                    </div>
                </div>
                <div class="dm_column_item_info_tips">
                    <ul>
                        <li>
                            采用 table-cell 原理实现，缺点是会受到 table-cell 固有缺陷的限制，比如 table-cell 本身无法固定宽度。
                        </li>
                    </ul>
                </div>

                <div class="dm_column_display">
                    <div class="dm_column_display_title">展示（实现方式2）:</div>
                    <div class="dm_column_display_cnt">
                        <div class="dm_dualCols2">
                            <div class="dm_dualCols_left">左栏</div>
                            <div class="dm_dualCols_right">右栏</div>
                        </div>
                    </div>
                </div>
                <div class="dm_column_item_info_tips">
                    采用特殊 padding + margin 实现，缺点是外层容器需设置 <code>overflow: hidden</code>，而这通常会阻碍容器内部的下拉菜单伸出外容器。
                </div>
            </div>
        </div>
        <!-- 等高左右双栏 end -->

        <!-- 文件上传按钮 start -->
        <div class="dm_column_item">
            <h3 id="qui_widget_fileUpload" class="dm_column_item_title">文件上传按钮</h3>

            <div class="dm_column_item_info">
                <div class="dm_column_display">
                    <div class="dm_column_display_title">展示:</div>
                    <div class="dm_column_display_cnt">
                        <a class="dm_btn dm_fileUpload" href="javascript:;">上传
                            <input class="dm_fileUpload_input" type="file">
                        </a>
                    </div>
                </div>
                <div class="dm_column_item_info_tips">
                    <ul>
                        <li>
                            内部包裹有一个"file"类型的 input，但这种类型的 input 有部分区域是无法实现 <code>cursor: pointer</code> 效果的，因此需要像此例中一样，设法将不可自定义鼠标的区域移到包裹容器外部。
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 等高左右双栏 end -->

        <!-- 树状选择菜单 start -->
        <div class="dm_column_item">
            <h3 id="qui_widget_treeMenu" class="dm_column_item_title">树状选择菜单</h3>

            <div class="dm_column_item_info">
                <div class="dm_column_display">
                    <div class="dm_column_display_title">展示:</div>
                    <div class="dm_column_display_cnt">
                        <div class="dm_treeMenu">
                            <ul>
                                <li>
                                    <div class="dm_treeMenu_item dm_treeMenu_item_Unfolded"><span>中国</span></div>
                                    <ul>
                                        <li>
                                            <div class="dm_treeMenu_item"><span>河南省</span></div>
                                        </li>
                                        <li>
                                            <div class="dm_treeMenu_item dm_treeMenu_item_Checked"><span>河北省</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="dm_treeMenu_item dm_treeMenu_item_Unfolded"><span>广东省</span>
                                            </div>
                                            <ul>
                                                <li>
                                                    <div class="dm_treeMenu_item dm_treeMenu_item_NoChild ">
                                                        <span>广州市</span></div>
                                                </li>
                                                <li>
                                                    <div class="dm_treeMenu_item dm_treeMenu_item_NoChild">
                                                        <span>佛山市</span></div>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="dm_column_item_info_tips">
                    <ul>
                        <li>
                            比较繁琐的是 checked 状态下的背景色块的位置相关的样式设置
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 树状选择菜单 end -->

    </div>

</div><!-- content end -->

<!-- 遮罩层效果演示 -->
<div id="qui_maskWrap" style="display: none;">
    <div class="dm_mask"></div>
    <div class="dm_dialog widget_dialogInMask">
        <div class="dm_dialog_head">
            <div class="dm_dialog_title">对话框标题</div>
            <a class="dm_dialog_close" href="javascript:;">×</a>
        </div>
        <div class="dm_dialog_body">点击任意处关闭</div>
        <div class="dm_dialog_foot">
            <a class="dm_btn" href="javascript:;">确认</a><a class="dm_btn dm_btn_Ghost" href="javascript:;">取消</a>
        </div>
    </div>
</div>

@@include('./_footer.html')
